
#index{
  .map-constructiont,.map-underPark,.map-slope,.map-dialog,.map-underMarket,.map-riverGate{
    i{
      margin-left: 10px*@ratio;
    }
    width: 450px*@ratio;
    height: 390px*@ratio;
    overflow: hidden;
    color: white !important;
    *::-webkit-scrollbar{
      width: 0;height: 0;
    }
    .detail{
      overflow: hidden;
      height: 364px*@ratio;
      display: block;
      overflow-y: auto;
      padding:0 15px*@ratio 15px*@ratio;
      font-size: 13px*@ratio;
      div{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px*@ratio dashed #3b4d61;
        .tlt{
          width: 28%;
          display: inline-block;
          color: rgba(255,255,255,.8);
          /*min-height: 38px*@ratio;*/
        }
        p{
          display: inline-block;
          height: 100%;
          line-height: 20px*@ratio;
          padding: 9px*@ratio;
          /* min-height: 38px*@ratio;*/
          width: 72%;
        }
        .incharge{
          display: flex;
          flex-wrap: nowrap;
          p{
            width: 100%;
            span{
              width: 40%;
              color: #10AFF3;
            }
          }
        }
        .charts{
          margin: 15px*@ratio 0;
          height:250px*@ratio;
        }
        time{
          display: block;
          text-align: center;
        }
      }
    }

  }
  .map-park,.map-coast,.map-dangerousbuilding,.map-flood{
    width: 450px*@ratio;
    height: 390px*@ratio;
    overflow: hidden;
    i{
      margin-left: 10px*@ratio;
    }
   /* .el-carousel__container {
     !* height: 450px*@ratio!important;*!
      height: 390px*@ratio!important;
    }*/
   /* .carousel-img {
      width: 100%;
      height: 230px*@ratio;
    }*/
    .details-view {
      width: 100%;
      height: 30px*@ratio;
      background-color: #091622;
      display: flex;
      line-height:30px*@ratio;
      text-align: center;
      flex-wrap: nowrap;
      div {
        width: 100%;
        height: 100%;
        font-size: 12px*@ratio;
        color: rgba(255,255,255,.6);
      }
      .clickBg {
        color: white;
      }
    }
    .list-view {
      height: 330px*@ratio;
      display: block;
      overflow-y: auto;
	  padding-bottom: 60px*@ratio;
      button{
        position: fixed;
        right: 5%;
        bottom: 5%;
        background-color: #081522;
        font-size: 12px*@ratio;
		width: 100%;
        i{
          vertical-align: middle;
        }
      }
    }
    .carousel-view {
      height: 230px*@ratio;
      padding: 30px*@ratio 30px*@ratio;
    }
    .nothing {
      width: 150px*@ratio;
      height: 80px*@ratio;
    }
    .center {
      width: 100%;
      height: 100%;
      display: flex;
      /*水平居中*/
      justify-content: center;
      /*垂直居中*/
      align-items: center;
    }
    .flex {
      display: flex;
    }
    .align-items {
      align-items: center;
    }
    .icon-view {
      margin-left: 20px*@ratio;
    }
    .list {
      width: 90%;
      display: flex;
      align-items: center;
      margin: 0 20px*@ratio;
      border-bottom: 1px*@ratio dashed #3b4d61;
      color: white !important;
      font-size: 12px*@ratio;
      border-bottom: 1px*@ratio dashed #3b4d61;
      .r-1 {
        color: rgba(255,255,255,.8);
        width: 38%;
        display: inline-block;
        height: 100%;
        line-height: 20px*@ratio;
        padding: 9px*@ratio;
        /* min-height: 38px*@ratio;*/
      }
      .r-2{
        line-height: 20px*@ratio;
        display: inline-block;
        height: 100%;
        padding: 9px*@ratio;
        width: 62%;
      }
    }
    *::-webkit-scrollbar{
      width: 0;height: 0;
    }
  }

  .map-confirm{
    font-size: 14px*@ratio;
    width: 300px*@ratio;
    height: 200px*@ratio;
    overflow: hidden;
    background: rgba(46,69,93, 0.95);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 5px*@ratio;
    transition: opacity 0.8s;
      .title {
        border-top-left-radius: 5px*@ratio;
        border-top-right-radius: 5px*@ratio;
        width: 100%;
        height: 15%;
        color: #ffffff;
        font-size: 16px*@ratio;
        background: rgba(44,69,116, 0.6);
        align-items: center;
        display: flex;
        padding: 0 20px*@ratio;
        span { flex: 1; margin-left: 10px*@ratio}
      }
      .content{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: white;
        height: 85%;
        p{
          line-height: 30px*@ratio;
        }
        button{
          width: 80px*@ratio;
          background-color: #3960ad;
          height: 30px*@ratio;
          margin: 20px*@ratio;
          color: white;
          border-radius:5px*@ratio;
          border: none;
          font-size: 14px*@ratio;
        }
    }
    }
  .left{

    .qxyj-view {
      width: 579.5px*@ratio;
      min-height: 100px * @ratio;
      height: auto;
      position: absolute;
      top: 70px* @ratio;
      left:0px * @ratio;
      background-color: #081d2b;
      z-index: 9999;
      border: 1px*@ratio solid rgba(255,255,255,.5);
      border-radius: 5px*@ratio;

      tbody{
        height: 200px*@ratio;
      }
      .arrow-p {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        left: 10px*@ratio;
        top: -14px*@ratio;
        z-index: -5;
      }
      .arrow-p::after {
        content: "";
        width: 26px*@ratio;
        height: 26px*@ratio;
        border-bottom: 1px*@ratio solid rgba(255,255,255,.5);
        border-right: 1px*@ratio solid rgba(255,255,255,.5);
        transform: rotate(225deg);
        background-color: #081d2b;
      }
      .yj_left{
        display: inline-block;
        width: 5%;
        margin: 15px*@ratio 15px*@ratio;
        vertical-align: top;
      }
      .yj_right{
        display: inline-block;
        color: white;
        font-size: 16px*@ratio;
        width: 85%;
        margin: 10px*@ratio;
        /*padding-top: 10px*@ratio;*/
        line-height: 25px*@ratio;
        p{
          text-align:justify
        }
      }
    }
  }

  .response {
    .donghua(@DHname){
      @keyframes @DHname {
        from {
          top: 0px*@ratio;
        }
        to {
          top: -230px*@ratio;
        }
      }
    };
    .donghua(mymove);
    .animation(@animation-name,@animation-duration,@animation-timing-function){
      animation: @arguments;
    }
    .content {
      height: 230px*@ratio;
      .animation(mymove,5s,infinite);
    }
  }
  .video-meeting{
    .title{
      height: 26px*@ratio;
      color: #ffffff;
      font-size: 18px*@ratio;
      background: #00b0f9!important;
    }
  }
}
